<template>  
  <view class="upload-container">  
    <!-- 假设这里是一个占位图片或上传提示 -->  
   <!-- <image class="placeholder-image" src=" your-placeholder-image.png" mode="aspectFit" v-if="!selectedFile"></image> -->
   <button type="default">上传文件</button>
    <!-- 显示已选择的文件信息（如果需要） -->  
    <view class="file-info" v-if="selectedFile">  
      <text>已选择文件：{{ selectedFile.name }}</text>  
      <text>大小：{{ selectedFile.size }} B</text>  
      <!-- 这里可以添加删除已选择文件的按钮，但在这个示例中我们不会实现它 -->  
    </view>  
  
    <!-- 文件上传按钮 -->  
    <button class="upload-btn" @click="chooseFile" style="width: 400px;">添加</button>  
  
    <!-- 隐藏的文件选择器，通过点击按钮触发 -->  
    <input type="file" @change="handleFileChange" class="hidden-file-input" accept="video/mp4,video/avi,video/wmv" capture="camera" />  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      selectedFile: null, // 存储已选择的文件信息  
    };  
  },  
  methods: {  
    // 触发文件选择器  
    chooseFile() {  
      // 注意：在uni-app中，你可能需要使用uni.chooseVideo而不是原生的input type="file"  
      // 但为了模拟原生HTML的行为，这里我们使用了一个隐藏的input  
      // 在实际开发中，建议使用uni.chooseVideo来获取视频文件  
      this.$refs.fileInput.click();  
    },  
  
    // 处理文件选择后的变化  
    handleFileChange(e) {  
      const files = e.target.files;  
      if (files.length > 0) {  
        // 假设我们只处理第一个文件  
        this.selectedFile = files[0];  
  
        // 在这里你可以添加验证逻辑，比如检查文件大小和类型  
  
        // 如果需要，你可以在这里调用上传函数  
        // this.uploadFile(this.selectedFile);  
      }  
    },  
  
    // 假设的上传函数（你需要根据实际情况实现它）  
    // uploadFile(file) {  
    //   // 上传逻辑...  
    // }  
  },  
};  
</script>  
  
<style scoped>  
.upload-container {  
  padding: 20px;  
  display: flex;  
  flex-direction: column; 
  
  justify-content: flex-start;
}  
  
.placeholder-image {  
  width: 200px;  
  height: 200px;  
  margin-bottom: 10px;  
}  
  
.file-info {  
  margin-bottom: 20px;  
  text-align: center;  
}  
  
.upload-btn {  
  background-color: #007aff;  
  color: #fff;  
  border: none;  
  padding: 10px 20px;  
  border-radius: 5px;  
  cursor: pointer;  
}  
  
.hidden-file-input {  
  position: absolute;  
  width: 0;  
  height: 0;  
  opacity: 0;  
  overflow: hidden;  
}  
</style>